<template>
    <div>
        <img src="../assets/bbb.png" alt="" class="flagimg">
        <div  class="regist_container">
            <div class="regist_box">
                <!--登录表单区域 -->
                <el-form  ref="registFormRef" label-width="90px" class="registForm" :model="registForm" :rules='loginRules'>
                    <!-- 用户名区域 -->
                    <el-form-item prop="username" label="用户名:">
                        <el-input v-model="registForm.username" name="username"></el-input>
                    </el-form-item>
                    <!-- 密码区域 -->
                    <el-form-item prop="password" label="密码:">
                        <el-input type="password"  v-model="registForm.password" name="pwd"></el-input>
                    </el-form-item>
                    <!-- 重复密码 -->
                    <el-form-item prop="password" label="重复密码:">
                        <el-input type="password"  v-model="registForm.repassword" name="rpwd"></el-input>
                    </el-form-item> 
                    <!-- 性别选项 -->
                     <el-form-item label="性别:" prop="sex">
                    <el-radio-group v-model="registForm.sex">
                    <el-radio label="男生"></el-radio>
                    <el-radio label="女生"></el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <!-- 按钮区域 -->
                    <div class="btns">
                        <span class="fabuzhe-btn">
                        <el-button type="danger" style="font-size:10px;" @click="adminregist">发布者注册</el-button>
                        </span>
                        <span>
                        <el-button type="primary" @click="toregist">注册</el-button>
                        <el-button type="commit" @click="reset">重置</el-button>
                        <el-button type="info" @click="tologin" icon="el-icon-arrow-right"></el-button>
                        </span>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                registForm: {
                    username: "",
                    password: "",
                    shenfen:"admin",
                    repassword:'',
                    sex:'',
                },
                loginRules:{
                    username:[
                        { required: true, message: '用户名不能为空', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
                    ],
                    // sex:[
                    //     { required: true, message: '性别不能为空', trigger: 'blur' },
                    // ]
                },
            }
        },
        methods: {
            // 重置表单按钮
            reset() {
                // window.console.log(this)
                this.$refs.registFormRef.resetFields();
            },
            toregist() {
                 this.$refs.registFormRef.validate(valid=>{
                     window.console.log(valid)
                    if(!valid) return
                    var params = new URLSearchParams()
                    params.append('userid', this.registForm.username)
                    params.append('pwd', this.registForm.password)
                    params.append('shenfen', this.registForm.shenfen)
                    this.$http.post('/client/register/finish',params).then(res => {
                    window.console.log(res.data);
                    if(res.data['msg']=='注册成功'){
                    this.$message.success(res.data['msg'])
                    this.$router.push('/login')
                    }
                    if(res.data['msg']=='账号已经存在'){
                    this.$message(res.data['msg'])
                    this.registForm.password=''
                    }
                }).catch(err=>{
                    window.console.log(err)
                })
                })
            },
            tologin() {
                this.$router.push('/login');
            },
            adminregist(){
                this.$router.push('/adminregist')
            }
        }
    }
</script>

<style scoped>
.flagimg{
    float: left;
    margin: 25px;
    width: 250px;
}
    .regist_container{
        height: 100%;
        background-color: #F1F1F1;
    }
    .regist_box{
        width: 425px;
        height: 410px;
        background-color: #fff;
        border-radius: 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 2px 2px #999;
    }

    .btns{
        display: flex;
        justify-content: space-between;
        width: 100%
    }
    .registForm{
        position: absolute;
        width: 100%;
        top: 50px;
        padding: 0 20px;
        box-sizing: border-box;
    }
        .fabuzhe-btn{
        padding-right: 10px;
    }
</style>
